<template>
  <div class="page">
    <div class="form-card" style="margin: 0">
      <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
        <el-form-item label="月份" prop="index1">
          <el-date-picker
            v-model="form.index1"
            :clearable="false"
            type="month"
            format="YYYY-MM"
            value-format="YYYY-MM "
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="工序/工艺" prop="index2">
          <el-select v-model="form.index2"> <el-option v-for="i in 6" :key="i" :label="i" /></el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class="table-header-box">
        <div v-for="(item, i) in tableHeaderData" :key="i">
          <div class="cell">{{ item }}</div>
        </div>
      </div>
      <div class="table-content-box">
        <div class="content-ul" v-for="items in ListData" :key="items.id">
          <div class="content-li">{{ items.name }}</div>

          <div class="content-li-box">
            <template v-if="items.ListData.length > 0">
              <div v-for="(item, i) in items.ListData" class="data-list-ul" :key="i">
                <div class="data-list-li">{{ item.index2 }}</div>
                <div class="data-list-li">{{ item.index3 }}</div>
                <div class="data-list-li">{{ item.index4 }}</div>
                <div class="data-list-li">{{ item.index5 }}</div>
              </div>
            </template>
          </div>

          <div class="content-li">{{ items.index6 }}</div>
          <div class="content-li">{{ items.index7 }}</div>
          <div class="content-li">{{ items.index8 }}</div>
          <div class="content-li">{{ items.index9 }}</div>
          <div class="content-li">{{ items.index10 }}</div>
          <div class="content-li">{{ items.index11 }}</div>
          <div class="content-li">{{ items.index12 }}</div>
          <div class="content-li">{{ items.index13 }}</div>
          <div class="content-li">
            <el-button link type="primary" icon="Edit" @click="handleInfo(items)"> 详情 </el-button>
          </div>
        </div>
      </div>
    </div>
    <InfoModal ref="InfoModalRef" />
  </div>
</template>
<script setup>
import InfoModal from "./components/InfoModal.vue"
let form = ref({ index1: null, index2: null })
let loading = ref(false)

// let tableData = ref([ ])
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

function getList() {}

let InfoModalRef = ref("")
function handleInfo(row) {
  if (InfoModalRef.value) {
    InfoModalRef.value.handleOpen(row)
  }
}

const tableHeaderData = [
  "工序/工艺",
  "能源种类",
  "实物量",
  "折标系数",
  "标煤量(tce)",
  "工艺能源消费量(tce)",
  "综合能源消费量(tce)",
  "产量(t)",
  "工艺单位产品能耗(kgce/t)",
  "综合单位产品能耗(kgce/t)",
  "一级",
  "二级",
  "三级",
  "操作",
]
const ListData = ref([
  {
    id: 1,
    name: "铜冶炼工艺",
    ListData: [
      { index2: "电（万kWh）", index3: "1841.286766", index4: "1.229", index5: "2262.94" },
      { index2: "一般烟煤 (t)", index3: "61.2", index4: "0.7143", index5: "132.23" },
      { index2: "无烟煤 (t)", index3: "181.2", index4: "0.7143", index5: "132.23" },
      { index2: "其他焦化产品 (t)", index3: "11.2", index4: "0.143", index5: "12.23" },
      { index2: "电（万kWh）", index3: "1841.286766", index4: "1.229", index5: "2262.94" },
      { index2: "柴油(t)", index3: "1821.2", index4: "1.73143", index5: "1332.23" },
      { index2: "天然气（万m3))", index3: "981.22", index4: "10.143", index5: "32.23" },
    ],
    index6: "3569.26",
    index7: "3702.53",
    index8: "17156.059",
    index9: "208.05",
    index10: "215.81",
    index11: "≤210",
    index12: "≤230",
    index13: "≤340",
  },
  {
    id: 2,
    name: "粗铜工艺",
    ListData: [],
    index6: "3569.26",
    index7: "3702.53",
    index8: "17156.059",
    index9: "208.05",
    index10: "215.81",
    index11: "≤210",
    index12: "≤230",
    index13: "≤340",
  },
])
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.table-header-box {
  width: 100%;
  background-color: #1d3778 !important;
  display: flex;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  font-family: OPPOSans, OPPOSans;
  padding: 8px 0;
  align-items: center;

  & > div {
    width: calc(100% / 14);
    word-break: break-word;
    background-color: #1d3778 !important;
    border-radius: 0px 0px 0px 0px;
    font-family: OPPOSans, OPPOSans;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    text-align: center;

    .cell {
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
      line-height: 23px;
      padding: 0 12px;
    }
  }
}

.table-content-box {
  color: #fff;
  padding: 8px 0;
  width: 100%;

  .content-ul {
    display: flex;
    align-items: center;
    width: 100%;

    &:nth-child(2n) {
      background: #141e4a;
    }

    .content-li {
      text-align: center;
      width: calc(100% / 14);
      height: 48px !important;
      line-height: 48px;
    }

    .content-li-box {
      text-align: center;

      width: calc((100% / 14) * 4);

      .data-list-ul {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px !important;
        line-height: 48px;

        &:nth-child(2n) {
          background: #141e4a;
        }

        .data-list-li {
          width: calc(100% / 4);
          white-space: nowrap;
          /* 禁止文本换行 */
          overflow: hidden;
          /* 隐藏超出容器的文本 */
          text-overflow: ellipsis;
          /* 使用省略号表示溢出的文本 */
        }
      }
    }
  }
}
</style>
